<template>
    <div>
      <Modal v-model="showPlotDetail" title="活动策划详情" width="700">
        <div class="planning-details">
          <Row>
            <Col span="4">活动时间</Col>
            <Col span="10">{{formItem.activity_time}}</Col>
          </Row>
          <Row>
            <Col span="4">活动地点</Col>
            <Col span="10">{{formItem.activity_place}}</Col>
          </Row>
          <Row>
            <Col span="4">活动措施</Col>
            <Col span="10">{{formItem.emergency_measure}}</Col>
          </Row>
          <Row>
            <Col span="4">参与人员范围</Col>
              <Col span="10">{{formItem.activity_object}}</Col>
          </Row>
          <Row>
            <Col span="4">活动策划流程</Col>
            <Col span="10">{{formItem.activity_flow}}</Col>
          </Row>
        </div>
        <div slot="footer">
          <Button type="error" @click="cancel">关闭</Button>
        </div>
      </Modal>
    </div>
</template>

<script>
export default {
  name: 'PlotDetail',
  props: {
    showPlotDetail: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    formData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      formItem: {}
    }
  },
  methods: {
    cancel () {
      this.$emit('cancel')
    }
  },
  watch: {
    formData (val) {
      this.formItem = val
    }
  }
}
</script>

<style scoped>
  .planning-details{
    font-size: 15px;
    line-height: 2.5em;
    text-align: left;
  }
  /deep/ .ivu-modal-header {
    border-bottom: none;
  }

  /deep/ .ivu-modal-footer {
    border-top: none;
  }
</style>
